<template>
  <div>
    <el-card>
      <el-form ref="shopQueryList" :inline="true" label-width="80px" :model="shopQueryList">
        <el-form-item label="店铺名称">
          <el-select v-model="shopQueryList.shopName" placeholder="请选择" style="width:100%">
            <el-option v-for="(item,i) in shopNameList" :key="i" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="用户名称">
          <el-select v-model="shopQueryList.userName" placeholder="请选择" style="width:100%">
            <el-option v-for="(item,i) in userNameList" :key="i" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="shopQueryList.state" placeholder="请选择">
            <el-option v-for="(item,i) in stateList" :key="i" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="单号">
          <el-input v-model="shopQueryList.order" />
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="shopQueryList.date"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="add-btn">
        <el-button type="primary" @click="goAdd">
          <i class="el-icon-plus" />
          新增
        </el-button>
      </div>
      <el-table :data="tableData">
        <el-table-column type="selection" />
        <el-table-column label="交易类型" prop="tradeType" />
        <el-table-column label="店铺名/用户名">
          <template #default="{row}">
            {{ row.shopName }}/{{ row.userName }}
          </template>
        </el-table-column>
        <el-table-column label="单号" prop="order" />
        <el-table-column label="状态" prop="state" />
        <el-table-column label="申请时间" prop="date">
          <template #default="{row}">
            {{ row.date|formatDate }}
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="comment" />
        <el-table-column label="确认退款率">
          <template #default="{row}">
            <el-button type="primary" size="mini" @click="goEdit(row)">编辑</el-button>
            <el-popconfirm
              confirm-button-text="确认"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              :title="'确定要删除'+row.order+'吗？'"
              @onConfirm="goDel(row.id)"
            >
              <el-button slot="reference" type="danger" size="mini">删除</el-button>
            </el-popconfirm>
            <el-button type="infor" size="mini">处理</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :current-page="pageData._page"
          :page-sizes="[1, 3, 5, 7]"
          :page-size="pageData._limit"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <el-dialog title="新增提现交易记录" :visible.sync="isDialogShow" width="40%" @close="onCancel">
      <el-form ref="tsRecord" label-width="80px" :rules="formRules" :model="tsRecordForm">
        <el-form-item label="交易类型" prop="tradeType">
          <el-select v-model="tsRecordForm.tradeType" placeholder="请选择" style="width:100%">
            <el-option v-for="(item,i) in tradeTypeList" :key="i" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择店铺" prop="shopName">
          <el-select v-model="tsRecordForm.shopName" placeholder="请选择" style="width:100%">
            <el-option v-for="(item,i) in shopNameList" :key="i" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="选择用户" prop="userName">
          <el-select v-model="tsRecordForm.userName" placeholder="请选择" style="width:100%">
            <el-option v-for="(item,i) in userNameList" :key="i" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-select v-model="tsRecordForm.state" placeholder="请选择" style="width:100%">
            <el-option v-for="(item,i) in stateList" :key="i" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
            v-model="shopQueryList.date"
            align="right"
            type="datetime"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-form-item label="备注" prop="comment">
          <el-input v-model="tsRecordForm.comment " type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-row type="flex" justify="end">
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onSubmit">确定</el-button>
        </el-row>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getWithdrawList, addWithdrawData, editWithdrawData, delWithdrawData } from '@/api/withdraw'
import { formatDate } from '@/filters'
export default {
  name: 'WithdrawDeposit',
  filters: {
    formatDate
  },
  data() {
    return {
      shopQueryList: {},
      tableData: [
        {
          tradeType: '123', // 交易类型
          shopName: '123', // 店铺名
          userName: '123', // 用户名
          odrer: '123', // 单号
          state: '', // 状态
          date: '123', // 申请时间
          comment: ''// 备注
        }
      ],
      pageData: {
        _page: 1,
        _limit: 1
      },
      total: 1,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      isDialogShow: false,
      tsRecordForm: {},
      formRules: {
        tradeType: [
          { required: true, message: '交易类型不能为空', trriger: 'input' }
        ],
        shopName: [
          { required: true, message: '店铺名不能为空', trriger: 'blur' }
        ],
        userName: [
          { required: true, message: '用户名不能为空', trriger: 'blur' }
        ],
        tsAmount: [
          { required: true, message: '金额不能为空', trriger: 'blur' }
        ],
        state: [
          { required: true, message: '状态不能为空', trriger: 'blur' }
        ]
      },
      tradeTypeList: [
        '现金付款',
        '刷储蓄卡支付',
        '刷信用卡支付',
        '微信付款',
        '支付宝'
      ],
      shopNameList: [
        '高杰的商铺',
        '谢秀英的商铺',
        '董强的商铺',
        '于丽的商铺',
        '程洋的商铺',
        '尹秀英的商铺',
        '彭伟的商铺',
        '钱秀英的商铺',
        '叶芳的商铺',
        '杨超的商铺',
        '冯平的商铺'
      ],
      userNameList: ['潘艳',
        '程磊',
        '彭静',
        '许磊',
        '罗芳',
        '郝强',
        '赖静',
        '雷秀英',
        '邱敏',
        '唐平'],
      stateList: ['正常', '不正常']
    }
  },
  created() {
    this.getWithdrawList()
  },
  methods: {
    async getWithdrawList() {
      const { data: data } = await getWithdrawList(this.pageData)
      // console.log(data)
      if (data.data.length === 0 && this.pageData._page !== 1) {
        this.pageData._page--
        this.getWithdrawList()
      } else {
        this.tableData = data.data
        this.total = data.total
      }
    },
    handleSizeChange(limit) {
      this.pageData._limit = limit
      this.getWithdrawList()
    },
    handleCurrentChange(page) {
      this.pageData._page = page
      this.getWithdrawList()
    },
    goAdd() {
      this.isDialogShow = true
    },
    goEdit(row) {
      this.tsRecordForm = row
      this.isDialogShow = true
    },
    async goDel(uid) {
      await delWithdrawData(uid)
      this.getWithdrawList()
      this.$message.success('删除成功')
    },
    onCancel() {
      this.isDialogShow = false
      this.$refs.tsRecord.resetFields()
      this.tsRecordForm = {
        tradeType: '',
        shopName: '',
        userName: '',
        state: '',
        date: '',
        comment: ''
      }
    },
    onSubmit() {
      // 加一个时间
      console.log(this.tsRecordForm)
      this.$refs.tsRecord.validate().then(async() => {
        this.tsRecordForm.order = 'B' + parseInt(1000000 * Math.random())
        this.tsRecordForm.date = new Date()
        if (!this.tsRecordForm.id) {
          const { data: data } = await addWithdrawData(this.tsRecordForm)
          this.$message.success('添加成功')
          console.log(data)
        } else {
          const { data: data } = await editWithdrawData(this.tsRecordForm)
          this.$message.success('修改成功')
          console.log(data)
        }
        this.getWithdrawList()
        this.isDialogShow = false
        this.$refs.tsRecord.resetFields()
      })
    },
    async query() {
      // const queryData = { ...this.filter(this.shopQueryList), ...this.pageData }
      // const {data } = await this.getWithdrawList({ ...this.filter(this.shopQueryList), ...this.pageData })
      // this.total = data.data.length
      const queryData = { ...this.filter(this.shopQueryList), ...this.pageData }
      const { data } = await getWithdrawList(queryData)
      this.tableData = data.data
      this.total = data.data.length
      console.log(queryData, data)
    },
    reset() {
      this.shopQueryList = {}
    },
    filter(data) {
      var queryList = {}
      for (var k in data) {
        if (data[k]) {
          queryList[k] = data[k]
        }
      }
      return queryList
    }
  }
}
</script>

<style lang="scss" scoped>
.el-form {
  padding-bottom: 50px;
  padding-top: 25px;
}
::v-deep.el-form--inline .el-form-item {
  margin-right: 100px;
  margin-left: 100px;
}
.add-btn {
  padding-bottom: 20px;
}
.el-pagination {
  padding-top: 30px;
}
</style>
